<template>
<view>
<!--express.wxml-->
<view class="logistics-mes">
    <view class="logistics-num">
        <view class="logistics-title">运单编号 : </view>
        <view class="logistics-cont">{{ delivery.invoice_no?delivery.invoice_no:'' }}</view>
    </view>
    <view class="logistics-num">
        <view class="logistics-title">国内承运人 : </view>
        <view class="logistics-cont">{{ delivery.shipping_name?delivery.shipping_name:'' }}</view>
    </view>
</view>
<view class="apply-state">
    <view class="state-item">
        <view class="item-wrap" v-if="express.status != '200'">
            <view class="state-title">{{ express.message == '参数有误' ? '暂无物流信息' : express.message }}</view>
            <view class="state-time">{{'    '}}</view>
        </view>
        <view v-for="(item, index) in express.data" :key="index" class="item-wrap">
            <view class="state-title">{{ item.context }}</view>
            <view class="state-time">{{ item.time }}</view>
        </view>
    </view>
</view>
</view>
</template>

<script>
var app = getApp();
var request = app.globalData.request;

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      delivery: null,
      //物流信息
      express: null,
      //快递信息
      error: '快递信息异常'
    };
  },

  components: {},
  props: {},
  onLoad: function (option) {
    this.requestDelivery(option.order_id);
  },
  methods: {
    requestDelivery: function (orderId) {
      var that = this;
      request.get('/api/user/express', {
        data: {
          order_id: orderId
        },
        success: function (res) {
          that.setData({
            delivery: res.data.result
          });
          that.requestExpress();
        }
      });
    },
    requestExpress: function () {
      var that = this;
      uni.request({
        url: this.url + '/home/api/queryExpress',
        data: {
          shipping_code: this.delivery.shipping_code,
          invoice_no: this.delivery.invoice_no
        },
        success: function (res) {
          that.setData({
            express: res.data
          });
        },
        fail: function (res) {
          app.globalData.showWarning('请求失败');
        }
      });
    }
  }
};
</script>
<style>
/* express.wxss */
.logistics-mes{
    padding: 20rpx 30rpx;
    background-color: #fff;
}
.logistics-num{
    display: flex;
    line-height: 48rpx;
    font-size: 28rpx; 
}
.logistics-title{
    color: #777;
    margin-right: 20rpx;
}
.logistics-cont{
    color: #444;
}
.apply-state{
    margin-top: 20rpx;
    background-color: #fff;
    padding-left: 50rpx;
    padding-top: 60rpx;
}
.state-item{
    border-left: 1px solid #f3f3f3;
    padding-left: 40rpx;
}
.item-wrap{
    position: relative;
    margin-bottom:20rpx;
    padding-bottom:20rpx;
    border-bottom: 1px solid #f3f3f3;
    font-size: 24rpx;
    color: #aaa;
    line-height: 1;
}
.item-wrap::before{
    content: '';
    position: absolute;
    left:-61rpx;
    top: 0;
    width: 26rpx;
    height: 26rpx;
    border-radius: 50%;
    background-color: #e23435;
    border:4px solid #ed8182;
}
.state-title{
    font-size: 28rpx;
    font-weight: bold;
    color: #666;
    padding-bottom:20rpx; 
}
</style>